<template>
  <div class="customer-page">
    <!-- 首屏欢迎区 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="animated-title">
          <span class="text-primary">暖心陪诊</span>
          <span class="text-secondary">让关爱从不缺席</span>
        </h1>
        <el-button
            type="primary"
            class="order-btn"
            @click="showOrderDialog"
        >
          <el-icon><Opportunity /></el-icon>
          <span>立即预约陪诊服务</span>
        </el-button>
      </div>
      <div class="hero-illustration">
        <transition name="float">
          <img src="@/assets/logo.svg" alt="护士插图">
        </transition>
      </div>
    </div>

    <!-- 服务优势展示 -->
    <div class="advantages-section">
      <h2 class="section-title">为什么选择我们?</h2>
      <div class="advantages-grid">
        <div
            v-for="(item, index) in advantages"
            :key="index"
            class="advantage-card"
            @mouseenter="hoverIndex = index"
            @mouseleave="hoverIndex = -1"
        >
          <transition name="scale">
            <div class="card-inner" :class="{active: hoverIndex === index}">
              <el-icon :size="40" class="card-icon">
                <component :is="item.icon" />
              </el-icon>
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
              <div class="stat-badge">{{ item.stat }}</div>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <!-- 服务流程 -->
    <div class="process-section">
      <h2 class="section-title">简单三步 安心陪诊</h2>
      <el-steps :active="3" align-center>
        <el-step title="在线预约" description="1分钟快速填写需求">
          <template #icon>
            <el-icon class="step-icon">
              <EditPen />
            </el-icon>
          </template>
        </el-step>
        <el-step title="专业匹配" description="智能推荐最优陪诊员">
          <template #icon>
            <el-icon class="step-icon">
              <User />
            </el-icon>
          </template>
        </el-step>
        <el-step title="安心就诊" description="全程专业陪同服务">
          <template #icon>
            <el-icon class="step-icon">
              <Checked />
            </el-icon>
          </template>
        </el-step>
      </el-steps>
    </div>

    <!-- 用户评价 -->
    <div class="reviews-section">
      <h2 class="section-title">用户暖心评价</h2>
      <el-carousel height="300px" :interval="5000" arrow="always">
        <el-carousel-item
            v-for="(review, index) in reviews"
            :key="index"
            class="review-item"
        >
          <div class="review-card">
            <el-avatar :size="80" :src="review.avatar" />
            <h3>{{ review.name }}</h3>
            <div class="rating">
              <el-rate
                  v-model="review.rating"
                  disabled
                  :colors="['#FFC107', '#FFC107', '#FFC107']"
              />
            </div>
            <p class="review-content">{{ review.content }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 底部CTA -->
    <div class="cta-section">
      <div class="cta-content">
        <h2>立即体验专业陪诊服务</h2>
        <p>超过<span class="highlight">10,000+</span>家庭的选择与信任</p>
        <el-button
            type="primary"
            size="large"
            class="cta-btn"
            @click="showOrderDialog"
        >
          <el-icon><ShoppingCart /></el-icon>
          <span>立即预约</span>
        </el-button>
      </div>
    </div>

    <!-- 预约弹窗 -->
    <!-- <order-dialog v-model="showDialog" /> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Opportunity,
  EditPen,
  User,
  Checked,
  ShoppingCart,
  Timer,
  FirstAidKit,
  Medal
} from '@element-plus/icons-vue'

// 引入缺失的图标组件
import CareTop from '@element-plus/icons-vue'

const showDialog = ref(false)
const hoverIndex = ref(-1)

const advantages = ref([
  {
    icon: CareTop,
    title: '专业医护团队',
    desc: '全部持证上岗，平均5年+临床经验',
    stat: '100% 持证率'
  },
  {
    icon: Timer,
    title: '快速响应',
    desc: '24小时在线，平均15分钟极速响应',
    stat: '15min 响应'
  },
  {
    icon: FirstAidKit,
    title: '全程保障',
    desc: '就诊全流程陪同+专业医疗建议',
    stat: '10+ 服务项'
  },
  {
    icon: Medal,
    title: '用户信赖',
    desc: '超过10000+家庭的共同选择',
    stat: '99% 满意度'
  }
])

const reviews = ref([
  {
    name: '张女士',
    avatar: new URL('@/assets/logo.svg', import.meta.url).href,
    rating: 5,
    content: '王护士全程耐心陪同，帮忙排队取号、与医生沟通，让我这个外地就医的人感到特别温暖'
  },
  // 其他评价数据...
])

const showOrderDialog = () => {
  showDialog.value = true
}
</script>

<style scoped>
.customer-page {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.hero-section {
  display: flex;
  align-items: center;
  padding: 80px 10%;
  background: linear-gradient(150deg, #e3f2fd 0%, #f3e5f5 100%);
}

.hero-section .hero-content {
  flex: 1;
}

.hero-section .hero-content .animated-title {
  font-size: 3.5rem;
  margin-bottom: 2rem;
}

.hero-section .hero-content .animated-title .text-primary {
  color: #2196f3;
  display: block;
}

.hero-section .hero-content .animated-title .text-secondary {
  color: #ff7043;
  font-size: 2rem;
}

.hero-section .hero-illustration {
  flex: 1;
  text-align: center;
}

.hero-section .hero-illustration img {
  max-width: 500px;
  animation: float 3s ease-in-out infinite;
}

.order-btn {
  padding: 20px 40px;
  font-size: 1.2rem;
  border-radius: 30px;
  background: linear-gradient(135deg, #2196f3, #64b5f6);
  box-shadow: 0 8px 20px rgba(33, 150, 243, 0.3);
  transition: all 0.3s;
}

.order-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(33, 150, 243, 0.4);
}

.advantages-section {
  padding: 80px 10%;
  background: white;
}

.advantages-section .advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.advantages-section .advantage-card {
  perspective: 1000px;
  height: 300px;
}

.advantages-section .advantage-card .card-inner {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-style: preserve-3d;
}

.advantages-section .advantage-card .card-inner.active {
  transform: rotateY(10deg) translateY(-10px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.advantages-section .advantage-card .card-inner .card-icon {
  color: #2196f3;
  margin-bottom: 20px;
}

.advantages-section .advantage-card .card-inner .stat-badge {
  background: #e3f2fd;
  color: #2196f3;
  padding: 8px 20px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 15px;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.float-enter-active {
  animation: float 3s ease-in-out;
}

.scale-enter-active {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
</style>
